<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-size: cover;
      background-position: center;
      transition: 0.5s;
    }

    body::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: -1;
    }

    .slide-container {
      position: relative;
      width: 70vw;
      height: 70vh;
      /* 关键 */
      overflow: hidden;
    }

    .silde-item {
      opacity: 0;
      position: absolute;
      top: -15vh;
      left: -15vw;
      width: 100vw;
      height: 100vh;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      z-index: 1;
      transition: 0.5s;
      border: solid;
    }

    .slide-container :nth-child(1) {
      background-image: url("./images/photo_1.jpg");

    }

    .slide-container :nth-child(2) {
      background-image: url("./images/photo_2.jpg");
    }

    .slide-container :nth-child(3) {
      background-image: url("./images/photo_3.jpg");
    }

    .slide-container :nth-child(4) {
      background-image: url("./images/photo_4.jpg");
    }

    .slide-container :nth-child(5) {
      background-image: url("./images/photo_5.jpg");
    }

    .silde-item.active {
      opacity: 1;
    }

    .left,
    .right {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      width: 60px;
      height: 60px;
      box-sizing: border-box;
      background-color: transparent;
      cursor: pointer;
      border-radius: 50%;
    }

    .left:hover,
    .right:hover {
      background-color: rgba(0, 0, 0, 0.5);
    }

    .left {
      left: calc(15vw - 70px);
      background: url("./images/arrow-left.png") no-repeat center;

    }

    .right {
      right: calc(15vw - 70px);
      background: url("./images/arrow-right.png") no-repeat center;
    }
  </style>
</head>

<body>
  <div class="slide-container">
    <div class="silde-item active"></div>
    <div class="silde-item"></div>
    <div class="silde-item"></div>
    <div class="silde-item"></div>
    <div class="silde-item"></div>
    <div class="left" id="left"></div>
    <div class="right" id="right"></div>
  </div>
  <script>
    const body = document.body;
    const slides = document.querySelectorAll(".silde-item");
    const left = document.getElementById("left");
    const right = document.getElementById("right");
    let timer = null;
    // 计时器
    let time = 0;
    // 记录当前展示的图片索引
    let currentIndex = 0;

    // 点击下一张
    let moveNext = (e) => {
      // 每点击一次索引加1，用于切换到下张图片
      currentIndex++;
      // 处理边界值
      if (currentIndex === slides.length) {
        currentIndex = 0;
      }
      setActiveSlide();
      setBgBody();
    }


    // 点击切换上一张
    let movePrev = () => {
      currentIndex--;
      // 处理边界值
      if (currentIndex < 0) {
        currentIndex = slides.length - 1;
      }
      setActiveSlide();
      setBgBody();
    }

    // 绑定点击事件
    left.onclick = movePrev;
    right.onclick = moveNext;

    function setBgBody() {
      body.style.backgroundImage = getComputedStyle(slides[currentIndex]).backgroundImage;
    }
    setBgBody();
    function setActiveSlide() {
      slides.forEach((ele) => {
        // 移除所有active样式
        ele.classList.remove("active");
        // 给当前点击的添加active样式
        slides[currentIndex].classList.add("active");
      })
    }

    // 自动播放
    function play() {
      timer = setInterval(() => {
        moveNext();
      }, 2500);
    }

    // 页面第一次打开，先自动播放
    play()

    // 鼠标移入停止自动播放
    slides.forEach(ele => {
      ele.onmouseover = () => {
        console.log(1);
        clearInterval(timer)
      }
      // 鼠标移出自动播放
      ele.onmouseleave = () => {
        play()
      }
    })
  </script>
</body>

</html>